<template>
    <div style="width: 60%; margin: 10px auto;">
      <div style="margin-bottom: 20px">
        <el-select v-model="data.typeId" placeholder="请选择宠物分类" size="large" style="width: 200px; margin-right: 10px">
          <el-option v-for="item in data.typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-input v-model="data.name" size="large" style="width: 400px; margin-right: 10px" placeholder="请输入宠物名称搜索"></el-input>
        <el-button size="large" type="primary" @click="load">搜索</el-button>
        <el-button size="large" @click="reset">重置</el-button>
        <el-button size="large" type="success" @click="handleAdd">发布寄养</el-button>
      </div>
  
      <div style="margin: 20px 0" v-if="data.total > 0">
        <el-row :gutter="20">
          <el-col :span="24" v-for="item in data.tableData" :key="item.id">
            <div class="card" style="padding: 20px; display: flex; grid-gap: 20px; margin-bottom: 20px">
                <img :src="item.img" alt="" style="width: 400px; height: 350px">
                <div style="flex: 1; width: 0; display: flex; flex-direction: column; justify-content: space-around">
                    <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">{{ item.name }}</div>
                    <div style="margin-bottom: 10px; display: flex; align-items: center;">
                        <span style="color: #666">发布人：{{ item.userName }}</span>
                    </div>
                    <div style="margin-bottom: 10px; display: flex; align-items: center;">
                        <span style="color: #666">宠物类型：{{ item.typeName }}</span>
                    </div>
                    <div style="margin-bottom: 10px">
                    <span style="color: #666">寄养类型：</span>
                        <span>{{ item.reuse }}</span>
                    </div>
                    <div style="margin-bottom: 10px">
                    <span style="color: #666">转让方式：</span>
                    <el-tag type="success">{{item.transferType}}</el-tag>
                    </div>
                    <div style="margin-bottom: 10px">
                    <span style="color: #666">宠物性别：</span>
                    <span>{{ item.sex }}</span>
                    </div>
                    <div style="margin-bottom: 10px">
                    <span style="color: #666">联系方式：{{ item.connectType? item.connectType+"：" : "" }}</span>
                        <span style="color: red;">{{ item.connect }}</span>
                    </div>
                    <div style="margin-bottom: 10px">
                        <span style="color: #666">数量：</span>
                        <span>{{ item.store }}</span>
                    </div>
                    <div class="line3" style="text-align: justify; line-height: 20px; height: 60px; margin-bottom: 10px">
                    <span style="color: #666">寄养原因：</span>
                    <el-tooltip effect="dark myTooltip" :content="item.introduce" placement="top" v-if="item.introduce?.length >= 114">
                        <span>{{ item.introduce }}</span>
                    </el-tooltip>
                    <span>{{ item.introduce }}</span>
                    </div>
                </div>
            </div>
          </el-col>
        </el-row>
      </div>

      
      <div style="padding: 20px; text-align: center; color: #666" v-else>暂无搜索结果...</div>
  
      <div style="margin-top: 20px" v-if="data.total">
        <el-pagination @current-change="load" layout="total, prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
      </div>

      
    <el-dialog v-model="isAddModalShow" title="发布寄养" width="600">
        <el-form ref="addForm" :model="form" :rules="rules">
            <el-form-item label="宠物名称" prop="name" :label-width="120">
                <el-input  v-model="form.name" autocomplete="off" placeholder="请输入宠物名称" />
            </el-form-item>
            <el-form-item label="宠物类型" prop="typeId" :label-width="120">
                <el-select v-model="form.typeId" placeholder="请选择宠物分类" clearable>
                    <el-option v-for="item in data.typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="宠物性别" prop="sex" :label-width="120">
                <el-select v-model="form.sex" placeholder="请选择宠物性别" clearable>
                    <el-option label="公" value="公" />
                    <el-option label="母" value="母" />
                </el-select>
            </el-form-item>
            <el-form-item label="宠物图片" prop="typeId" :label-width="120">
                <el-upload
                    :action="baseUrl + '/files/upload'"
                    :headers="{ 'token': data.user.token }"
                    :on-success="handleFileUpload"
                    list-type="picture"
                >
                    <el-button type="primary">上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="联系方式类型" prop="connectType" :label-width="120">
                <el-select v-model="form.connectType" placeholder="请选择联系方式类型" clearable>
                    <el-option label="手机号" value="手机号" />
                    <el-option label="QQ" value="QQ" />
                    <el-option label="微信" value="微信" />
                    <el-option label="Email" value="Email" />
                </el-select>
            </el-form-item>
            <el-form-item label="联系方式" prop="connect" :label-width="120">
                <el-input v-model="form.connect" autocomplete="off" placeholder="请输入联系方式"/>
            </el-form-item>
            
            <el-form-item label="寄养类型" prop="reuse" :label-width="120">
                <el-select v-model="form.reuse" placeholder="请选择寄养类型" clearable>
                    <el-option label="流浪宠物" value="流浪宠物" />
                    <el-option label="宠物转让" value="宠物转让" />
                    <el-option label="短期托管" value="短期托管" />
                </el-select>
            </el-form-item>
            <el-form-item label="数量" prop="store" :label-width="120">
                <el-input-number v-model="form.store" autocomplete="off" />
            </el-form-item>
            <el-form-item label="转让方式" prop="transferType" :label-width="120">
                <el-select v-model="form.transferType" placeholder="请选择转让方式" clearable>
                    <el-option label="快递" value="快递" />
                    <el-option label="线下" value="线下" />
                </el-select>
            </el-form-item>
            <el-form-item label="寄养原因" prop="typeId" :label-width="120">
                <el-input placeholder="请输入寄养原因" type="textarea" v-model="form.introduce" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="isAddModalShow = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">
            确认
            </el-button>
        </div>
        </template>
    </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from "vue";
  import request from "@/utils/request.js";
  import {ElMessage} from "element-plus";
const baseUrl = import.meta.env.VITE_BASE_URL
  
  const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  tableData: [],
    pageNum: 1,
    pageSize: 8,
    total: 0,
    name: null,
    img: '',
    typeId: null,
    typeList: []
  })
  
  window.scrollTo({ top: 0 })
  
  request.get('/petType/selectAll').then(res =>{
    data.typeList = res.data
  })
  
  const load = () => {
    request.get('/petReuse/selectPage', {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        name: data.name,
        typeId: data.typeId
      }
    }).then(res => {
      if (res.code === '200') {
        data.tableData = res.data?.list || []
        data.total = res.data?.total
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
  load()
  
  const reset = () => {
    data.name = null
    data.typeId = null
    load()
  }

  const addForm = ref()
  const isAddModalShow = ref(false)
  const form = reactive({
    name: "",
    typeId: null,
    sex: null,
    connect: "",
    img: '',
    reuse: null,
    connectType: '',
    store: null,
    transferType: null,
    introduce: ""
  })
  const rules = {
    name: [
        { required: true, message: '请输入宠物名称', trigger: 'blur' }
    ],
    typeId: [
        { required: true, message: '请选择宠物类型', trigger: 'blur' }
    ],
    sex: [
        { required: true, message: '请选择宠物性别', trigger: 'blur' }
    ],
    img: [
        { required: true, message: '请选择图片', trigger: 'blur' }
    ],
    connect: [
        { required: true, message: '请输入联系方式', trigger: 'blur' }
    ],
    reuse: [
        { required: true, message: '请选择寄养类型', trigger: 'blur' }
    ],
    store: [
        { required: true, message: '请输入数量', trigger: 'blur' }
    ],
    transferType: [
        { required: true, message: '请选择转让方式', trigger: 'blur' }
    ],
    introduce: [
        { required: true, message: '请输入寄养原因', trigger: 'blur' }
    ]
    };
  const handleAdd = async () => {
    isAddModalShow.value = true
    await addForm.value.resetFields()
  }

  const handleFileUpload = (res) => {
    form.img = res.data
  }

  const handleSubmit = async () => {
    const valid = await addForm.value.validate()
    if (valid) {
        request.post('/petReuse/add', form).then(res => {
            if(res.code == 200) {
                ElMessage.success("保存成功")
                isAddModalShow.value = false
            }else {

                ElMessage.error("操作失败")
            }
        })
    }
  }

  </script>
  
  <style scoped>
  
  </style>